<template>
  <!-- 添加应用 -->
  <div>
    <!-- 内容主体区域 -->
    <dtDialog :title="title" :visible.sync="visible" :is-loading="loading" @closeDialog="handleClose" @comfirmBtn="onSubmit()">
      <el-form ref="formRef" slot="content" :rules="rules" :model="formData" label-width="82px">
        <el-form-item label="应用名称" prop="appName">
          <el-input v-model.trim="formData.appName" autocomplete="off" placeholder="请输入应用名称" maxlength="30" show-word-limit class="limit" />
        </el-form-item>
        <el-form-item label="应用编码" prop="appCode">
          <el-input v-model="formData.appCode" :disabled="type == 'update'" autocomplete="off" placeholder="请输入应用编码" maxlength="30" show-word-limit class="limit" />
        </el-form-item>
        <el-form-item label="排序" prop="appSort">
          <el-input v-model="formData.appSort" autocomplete="off" placeholder="请输入排序号" :oninput="initPositiveInteger()" maxlength="8" show-word-limit class="limit" />
        </el-form-item>
        <el-form-item label="应用图标" prop="appIcon">
          <icon-picker :icon.sync="formData.appIcon" @change="handleSelectedIcon" />
        </el-form-item>
      </el-form>
    </dtDialog>
  </div>
</template>
<script>
import applicationApi from '@/framework/api/application'
import IconPicker from '@/framework/views/system/permission/components/IconPicker'
import { positiveInteger } from '@/framework/utils/validate'
export default {
  name: 'ApplicationEdit',
  components: {
    IconPicker
  },
  data() {
    return {
      type: 'add',
      title: '新增应用',
      visible: false,
      formData: {
        appId: '',
        appName: '',
        appCode: '',
        appSort: '',
        appIcon: ''
      },
      loading: false,
      rules: {
        appName: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
        appCode: [{ required: true, message: '请输入应用编码', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]+$/, message: '请输入字母或数字' }
        ],
        appIcon: [{ required: true, message: '请选择应用图标', trigger: 'change', validator: (rule, value, callback) => {
          if (!this.formData.appIcon) {
            callback(new Error('请选择应用图标'))
          } else callback()
        } }],
        appSort: [{ required: true, message: '请输入排序号', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 校验排序规则
    initPositiveInteger(data) {
      return positiveInteger(data)
    },
    // open(obj, appId) {
    //   if (this.type == 'add') {
    //     this.title = '新增应用'
    //     this.visible = true
    //     this.$nextTick(() => {
    //       this.$refs.formRef && this.$refs.formRef.resetFields()
    //     })
    //   } else if (this.type == 'update') {
    //     this.title = '应用基本信息'
    //     this.visible = true
    //     this.$nextTick(() => {
    //       this.formData = JSON.parse(JSON.stringify(obj))
    //       this.formData.appId = appId
    //     })
    //   }
    // },
    openAdd() {
      this.type = 'add'
      this.title = '新增应用'
      this.visible = true
      this.$nextTick(() => {
        this.$refs.formRef && this.$refs.formRef.resetFields()
      })
    },
    openEdit(obj) {
      this.type = 'update'
      this.title = '修改应用'
      this.visible = true
      this.$nextTick(() => {
        this.formData = JSON.parse(JSON.stringify(obj))
        this.formData.appId = obj.appId
      })
    },
    handleSelectedIcon(iconText) {
      this.formData.appIcon = iconText
      if (this.formData.appIcon) {
        this.$refs.formRef.clearValidate('appIcon')
      } else {
        this.$refs.formRef.validateField('appIcon')
      }
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.type == 'add') {
            applicationApi.addApp(this.formData)
              .then((res) => {
                if (res.code == '00000') {
                  this.loading = false
                  this.$parent.handleAddClose()
                  this.visible = false
                  this.$message.success('新增成功')
                }
              })
              .catch(res => {
                this.$message.error('新增失败')
                this.visible = false
                this.loading = false
              })
          } else if (this.type == 'update') {
            applicationApi.updateApp(this.formData)
              .then((res) => {
                if (res.code == '00000') {
                  this.loading = false
                  this.$parent.handleEditClose(this.formData)
                  this.visible = false
                  this.$message.success('修改成功')
                }
              })
              .catch(res => {
                this.$message.error('修改失败')
                this.visible = false
                this.loading = false
              })
          }
        }
      })
    },
    handleClose() {
      // 清空数据关闭页面
      this.$refs.formRef.clearValidate()
      this.visible = false
    }

    // 提交
    // onSubmit(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.submit()
    //     } else {
    //       return false
    //     }
    //   })
    // },
    // async submit() {
    //   let res = null
    //   if (this.formData.appId) {
    //     res = await applicationApi.updateApp(this.formData)
    //   } else {
    //     res = await applicationApi.addApp(this.formData)
    //   }
    //   if (res.code === '00000') {
    //     this.$message({
    //       type: 'success',
    //       message: '提交成功'
    //     })
    //     this.handleClose('commit')
    //   } else {
    //     this.$message({
    //       type: 'error',
    //       message: '提交失败'
    //     })
    //   }
    // },
    // 关闭对话框触发

  }
}
</script>

<style scoped>

</style>
